<!--
  -    Copyright (c) 2018-2025, gewu All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the gewucn.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: gewu
  -->
<template>
  <div class="execution">
   
    <el-card>
      <div class="card">
        <el-row :gutter="30">
          <el-col :span="13">
            <h4 style="margin-top: 0">
              <span class="titleAdd"></span>新增任务 | Task
            </h4>
            <div class="listStyle">
              <label style="font-size: 14px; width: 100px">任务名称*</label>
              <el-input placeholder="注塑机定期维护"></el-input>
            </div>

            <div class="listStyle">
              <i class="icon-gwshijian"></i>
              <el-date-picker
                style="width: 300px"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
              <el-select
                placeholder="请选择"
                v-model="ways"
                style="margin-left: 20px; width: 150px"
              >
                <!-- <el-option> </el-option> -->
              </el-select>
            </div>
            <div class="listStyle">
              <i class="el-icon-user-solid"></i>
              <el-input></el-input>
            </div>
            <div class="listStyle">
              <i class="el-icon-bell"></i>
              <el-select placeholder="请选择" v-model="time">
                <!-- <el-option> </el-option> -->
              </el-select>
            </div>

            <div class="listStyle">
              <i class="el-icon-notebook-2"></i>
              <el-input type="textarea" :rows="2" placeholder="请输入内容">
              </el-input>
            </div>
            <div>
              <el-button type="primary">新增任务</el-button>
              <el-button @click="cancelBtn">取消返回</el-button>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="rightCard">
              <div class="rightContent">
                <h4>策略构建</h4>
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="策略名称">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="重复频率">
                    <el-input v-model="form.number" type="number"></el-input>
                  </el-form-item>
                  <el-form-item label="结束时间">
                    <br />
                    <!-- <el-radio-group v-model="form.time"> -->
                    <el-radio label="无限循环" v-model="form.time"></el-radio>
                    <br />
                    <el-radio
                      label="终止于某天 "
                      v-model="form.time"
                    ></el-radio>
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      style="width: 120px"
                    >
                    </el-date-picker>

                    <el-radio
                      label="限定重复次数"
                      v-model="form.time"
                    ></el-radio>
                    <el-input type="number" style="width: 120px"></el-input>
                    次后
                    <!-- </el-radio-group> -->
                  </el-form-item>
                </el-form>
                <div style="text-align: right">
                  <el-button type="primary">添加</el-button>
                </div>
              </div>
              <div class="dashed"></div>
              <div class="rightContent">
                <h4>策略预览</h4>
                <div>
                  <el-tag
                    v-for="(item, index) in tag"
                    :key="index"
                    :type="item.type"
                    effect="plain"
                  >
                    {{ item.label }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>


export default {
  name: "TableRole",
  data() {
    return {
      ways: "",
      time: "",
      form: {
        time: "",
        number: "",
        name: "",
      },
      tag: [
        { type: "info", label: "不重复" },
        { type: "success", label: "每天" },
        { type: "info", label: "每周星期一" },
        { type: "danger", label: "每周三" },
        { type: "success", label: "每个工作日" },
      ],
    };
  },
  
  methods: {
    handleTable(m, n) {
      console.log(m, n);
      this.projectDetail = true;
    },
    chooseTime(index) {
      this.choosedSpan = index;
    },
    cancelBtn(){
        this.$emit('cancelBtn',true)
    }
  },
};
</script>
<style scoped lang='scss'>
::v-deep .card {
  padding: 10px 20px;

  .listStyle {
    display: flex;
    align-items: center;
    margin: 20px auto;
    i {
      font-size: 14px;
      margin-right: 20px;
    }
    .el-input__suffix {
      i {
        margin-right: 0;
      }
    }
  }
}
.rightCard {
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  margin-top: 30px;
}
.dashed {
  border-top: 1px dashed #dcdcdc;
  // margin: 20px 0 0 20px;
}
.rightContent {
  padding: 20px;

  h4 {
    margin-top: 0;
  }
  .el-radio {
    margin-right: 0px;
    width: 120px;
    margin: 10px 0;
  }
  .el-tag--plain.el-tag--success {
    background-color: rgba(143, 205, 78, 0.1);
    color: #8fcd4e;
    border: none;
  }
  .el-tag--plain.el-tag--info {
    background-color: #f0f8ff;
    color: #52b7f5;
    border: none;
  }
  .el-tag--plain.el-tag--danger {
    background-color: rgba(239, 134, 101, 0.1);
    color: #ef8665;
    border: none;
  }
}
.rightContent .el-tag--small {
  margin: 0 10px 15px 10px;
}
.titleAdd {
  width: 5px;
  height: 20px;
  background-color: #26ae61;
  display: inline-block;
  margin-right: 10px;
  vertical-align: bottom;
}
</style>